<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>值属性</title>
</head>
<body>
    <div id="box">
        
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script>
        
        var data = {
            username:'kuiya',
            password:123456,
            gender:'male',
            // age:23,
            phone:18319005000,
            isSingle:'单身',
            sorce:{
                math:80,
                english:85
            }
        }

        let sorce = data.sorce;

        // 1.1 传统方式添加属性：语文90
        sorce.chinese = 90;

        // 1.2 通过Object.defineProperty设置属性：地理95
        Object.defineProperty(sorce,'geography',{
            value:95
        })

        /* 
            2.1 查看属性特性：Object.getOwnPropertyDescriptors(targetObj) 
                * configurable：属性特性总开关，为fasle时无法修改其他属性特性
                * writable：可写性
                * enumerable：可枚举性/可遍历性
                * value：属性值(严格意义上来说不是属性特性)
        */
        console.log('最开始的sorce属性特性：',Object.getOwnPropertyDescriptors(sorce));
        /* 
            * 传统方式属性设置的属性(math,english,chinese) 的属性特性均默认为true
            * Object.defineProperty设置属性(geography)的属性特性均为false
        */

        /* 2.2 修改属性特性 */
        /* 2.2.1 可写性：设置用户名不可修改
            * 控制台打印用户名并修改，再打印，发现还是原来的用户名
        */
        Object.defineProperty(data,'username',{
            writable:false
        })

        /* 2.2.2 可枚举性：设置密码不可被枚举
            * for-in打印对象关键key，password不在其中
        */
        Object.defineProperty(data,'password',{
            enumerable:false
        })
        for(let key in data){
            console.log(key);
        }

        /* 2.2.3 属性特性总开关：设置data对象下的gender属性的属性特性开关为false */
        Object.defineProperty(data,'gender',{
            configurable:false,
            // writable:false
        })
        // 此时的gender可读、可枚举、总开关关闭
        console.log('data下的gender总开关已关闭：',Object.getOwnPropertyDescriptors(data));
        // 设置data不可枚举
        Object.defineProperty(data,'gender',{
            enumerable:false
            // writable:false
        })

    </script>
</body>
</html>